<template>
	<view class="">
		<u-navbar :is-back="false" title="" :background="background">
			<view class="nav_bar">
				<u-icon @click="handleBack" name='arrow-left'></u-icon>
				<view class="nav_box" @click="actionSheeShow=true">
					<view class="searc_type">
						<view class="">
							{{searchTitle}}
						</view>
						<u-icon size="20" style="margin-left: 6rpx;" name='arrow-down-fill'></u-icon>
					</view>
					<u-input v-model="searchValue" type="text" :border="false" />
					<!-- <u-icon size="34" color="#A5A6A6" name='camera'></u-icon> -->
				</view>
				<view class="search_title" @click="handleSearch()">
					搜索
				</view>
			</view>
		</u-navbar>
		<view class="type_list">
			<view class="type_item" @click="handleSort('distance')">
				<view class="title">
					距离
				</view>
				<u-icon v-if="distance=='asc'" size="20" style="margin-left: 6rpx;" name='arrow-down-fill'
					color="#DBDBDB">
				</u-icon>
				<u-icon v-else size="20" style="margin-left: 6rpx;" name='arrow-up-fill' color="#DBDBDB"></u-icon>
			</view>
			<view class="type_item" @click="handleSort('salesVolume')">
				<view class="title">
					销量
				</view>
				<u-icon v-if="salesVolume=='asc'" size="20" style="margin-left: 6rpx;" name='arrow-down-fill'
					color="#DBDBDB">
				</u-icon>
				<u-icon v-else size="20" style="margin-left: 6rpx;" name='arrow-up-fill' color="#DBDBDB"></u-icon>
			</view>
			<view class="type_item" @click="handleSort('price')">
				<view class="title">
					价格
				</view>
				<u-icon v-if="price=='asc'" size="20" style="margin-left: 6rpx;" name='arrow-down-fill' color="#DBDBDB">
				</u-icon>
				<u-icon v-else size="20" style="margin-left: 6rpx;" name='arrow-up-fill' color="#DBDBDB"></u-icon>

			</view>
		</view>
		<view class="goods_box" v-if="searchTitle=='商品'">
			<u-empty v-if="list.length==0"></u-empty>
			<view class="goods_row" v-else>
				<GoodsItemRow v-for="(item,index) in list" :item='item' :key='index'></GoodsItemRow>
			</view>
		</view>
		<view class="goods_box" v-if="searchTitle=='店铺'">
			<u-empty v-if="list.length==0"></u-empty>
			<view class="goods_row" v-else>
				<Shop v-for="(item,index) in list" :item='item' :key='index'></Shop>
			</view>
		</view>
		<u-loadmore :status="status" />
		<u-action-sheet :list="actionSheetList" v-model="actionSheeShow" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
	import initData from '@/mixin/initData.js'
	import GoodsItemRow from '@/components/ZY-Goods-item-row/ZY-Goods-item.vue'
	import Shop from '@/components/ZY-shop/ZY-shop.vue'
	export default {
		components: {
			GoodsItemRow,
			Shop
		},
		mixins: [initData],
		props: {
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				searchTitle: '商品',
				actionSheeShow: false,
				actionSheetList: [{
						text: '商品',
						apiUrl: 'carouselMap/searchGoodsByTitle'
					},
					{
						text: '店铺',
						apiUrl: 'carouselMap/searchAppBuinessByName'
					},

				],
				apiUrl: 'carouselMap/searchGoodsByTitle',
				searchValue: '',
				background: {
					backgroundColor: '#fff',
				},
				lng: '',
				lat: '',
				distance: 'asc', //价格 asc升序 desc降序 距离 asc升序 desc降序
				salesVolume: 'asc', //销量 asc升序 desc降序
				price: 'asc' //价格 asc升序 desc降序 

			};
		},
		onLoad(e) {
			if (e && e.val) {
				this.searchValue = e.val
			}
			this.lng = this.cache.getCache('longitude')
			this.lat = this.cache.getCache('latitude')
			this.miXinInit()
		},
		// GET /app/carouselMap/searchGoodsByTitle 商品 
		// GET /app/carouselMap/searchAppBuinessByName 店铺
		methods: {
			handleSort(typeKey) {
				this[typeKey] = this[typeKey] == 'asc' ? 'desc' : 'asc'
				this.toReset()
				this.miXinInit()
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.searchTitle = this.actionSheetList[index].text;
				this.apiUrl = this.actionSheetList[index].apiUrl;
				this.toReset()
				this.miXinInit()

			},
			// 请求前的参数处理
			beforeInit() {
				// this.apiUrl = "carouselMap/searchGoodsByTitle";
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					title: this.searchValue,
					name: this.searchValue,
					lng: this.lng,
					lat: this.lat,
					distance: this.distance,
					salesVolume: this.salesVolume,
					price: this.price,

				};

				this.params = {
					...params
				};
			},
			handleBack() {
				uni.navigateBack({

				})
			},
			changeVal(e) {
				this.$emit('input', e)
			},
			handleSearch() {
				this.toTop()
				console.log(this.searchTitle, 'searchTitlesearchTitle')
				this.toReset()
				this.miXinInit()
			},
			// 返回顶部
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goods_row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.type_list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 100rpx;

		.type_item {
			display: flex;
			align-items: center;

			.title {
				margin-right: 10rpx;
				color: #101010;
				font-size: 28rpx;
			}
		}

	}

	.nav_bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		width: 100%;
		padding: 0 30rpx;

		.search_title {
			white-space: nowrap;
			margin-left: 6rpx;
		}
	}

	.nav_box {
		margin-left: 20rpx;
		width: 100%;
		background-color: #EAEAEA;
		border-radius: 35rpx;
		height: 76rpx;


		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;

		.searc_type {
			margin-right: 10rpx;
			color: #000000;
			font-size: 30rpx;
			display: flex;
			align-items: center;
		}

	}
</style>
